<template>
  <ul id="nav">
    <router-link tag="li" v-for="(item, key) in list" :key="key" :to="item.router">
    <img :src="item.url">
	<p>{{ item.name }}</p>
	</router-link>
  </ul>
</template>

<script>
export default {
  name: "page",
  data() {
    return {
      list: [
        { router: "/", name: "首页" },
        { router: "/about", name: "课程" },
        { router: "/appointmentrecord", name: "约课记录" },
        { router: "/about", name: "个人" }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
#nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #ddd;
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  li {
	width: 25%;
	height: 100%;
	display: flex;
	p{
	  text-align: center;
	  font-size: 16px;
	  line-height: 16px;
	}
  }
}
</style>